{extend name="common/default" /}
{block name="style"}
<style>
    .page__bd{
        padding:0;
    }
    .weui-tab__panel{
        padding: 16px;
    }
    .weui-bar__item_on img{
        position: relative;
        left: -10000px;
        filter: drop-shadow(10000px 0 0 #07c160);
    }
    .rank-one{
        border-bottom: 1px solid #ececec;
        padding: .3rem 0;
        align-items: center;
        justify-content: center;
    }
    .rank-one .weui-flex__item{
        text-align: center;
    }
    .rank-one .rank{
        font-size: 1.2rem;
    }
    .rank-one .avatar{
        width: 3rem;
        height: 3rem;
        border-radius: .2rem;
    }
    .rank-one .nickname{
        font-size: 1rem;
        font-weight: bolder;
    }
    .rank-one .group{
        font-size: .5rem;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .rank-one .sumpoints{
        font-size: 1.2rem;
        color: red;
    }
    .rank-one .countanswer{
        position: absolute;
        top: -8px;
        margin-left: -10px;
    }
    .rank-date{
        text-align: center;
        padding: .5rem;
        margin: -16px;
        margin-bottom: .5rem;
        background: #ececec;
    }
</style>
{/block}

{block name="container"}
<div class="container">
    <div class="page js_show">
        <div class="page__bd page__bd_spacing" style="height: 100%;">
            <div class="weui-tab">
                <div class="weui-tab__panel">
                    <div class="weui-tab">
                        <div class="weui-navbar">
                            <div class="weui-navbar__item weui-bar__item_on tab-ranking" data-type="0">总榜</div>
                            <div class="weui-navbar__item tab-ranking" data-type="1">年榜</div>
                            <div class="weui-navbar__item tab-ranking" data-type="2">月榜</div>
                            <div class="weui-navbar__item tab-ranking" data-type="3">周榜</div>
                        </div>
                        <div class="weui-tab__panel">
                            <div id="panelRanking"></div>
                            <a href="javascript:loadmore();" class="weui-btn weui-btn_default" style="margin-top:.5rem;" id="btnMore">查看更多...</a>
                        </div>
                    </div>
                </div>
                <div class="weui-tabbar">
                    <div class="weui-tabbar__item" data-url="{:addon_url('rexam/index/index')}">
                        <div style="display: inline-block; position: relative;">
                            <img src="__ADDON__/home.svg" alt="" class="weui-tabbar__icon">
                        </div>
                        <p class="weui-tabbar__label">答题</p>
                    </div>
                    <div class="weui-tabbar__item weui-bar__item_on" data-url="{:addon_url('rexam/index/ranking')}">
                        <img src="__ADDON__/ranking.svg" alt="" class="weui-tabbar__icon">
                        <p class="weui-tabbar__label">排行榜</p>
                    </div>
                    <div class="weui-tabbar__item" data-url="{:addon_url('rexam/index/me')}">
                        <img src="__ADDON__/me.svg" alt="" class="weui-tabbar__icon">
                        <p class="weui-tabbar__label">我</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="javascript"}
<script src="__ADDON__/jquery.tmpl.js"></script>
<script id="tplDate" type="text/html">
    <div class="weui-flex rank-date">
        {{each(i,v) date}}
        <div class="weui-flex__item">${v}</div>
        {{/each}}
    </div>
</script>
<script id="tplRanking" type="text/html">
    {{each(i,v) ranking}}
    <div class="weui-flex rank-one">
        <div class="weui-flex__item"><span class="rank">${rank}</span></div>
        <div class="weui-flex__item" style="display: inline-block; position: relative;"><img class="avatar" src="${avatar}"/><span class="weui-badge countanswer">${countanswer}</span></div>
        <div class="weui-flex__item" style="text-align: left; flex: 2;"><div class="nickname">${name}</div><div class="group">${group_name}</div></div>
        <div class="weui-flex__item"><span class="sumpoints">${sumpoints}</span></div>
    </div>
    {{/each}}
</script>

<script type="text/javascript">
    var type = 0;   //类型：0总榜，1月榜，2周榜
    var page = 1;   //翻頁
    var prev = 1;   //前向查找
    function load(){
        var loading = weui.loading('加载中', {
            className: 'custom-classname'
        });
        $.ajax({
            type: 'POST',
            url: "{:addon_url('rexam/answer/ranking')}",
            data: {
                type:type,
                page:page,
                prev:prev
            },
            dataType: 'json',
            success: function (res) {
                console.log(res);
                loading.hide();
                if (res.code == 1) {
                    var ranking = res.data;
                    if(page == 1){
                        $( "#panelRanking" ).empty();
                        if(type>0){
                            $( "#tplDate" ).tmpl( ranking ).appendTo( "#panelRanking" );
                        }
                    }
                    if(ranking['count'] > 0){
                        $("#tplRanking").tmpl( ranking ).appendTo( "#panelRanking" );
                    }

                    if(ranking['count'] < 10) {
                        $("#btnMore").addClass("weui-btn_disabled");
                        $("#btnMore").html("已全部加载完");
                    }else{
                        $("#btnMore").removeClass("weui-btn_disabled");
                        $("#btnMore").html("查看更多...");
                    }
                }
            }
        })
    }
    function loadmore(){
        page++;
        load();
    }

    $(function(){
        $('.tab-ranking').click(function(){
            $('.tab-ranking').removeClass('weui-bar__item_on');
            $(this).addClass('weui-bar__item_on');
            type = $(this).data('type');
            page = 1;
            load();
        })

        load();
    })
</script>
{/block}

